from nicegui import ui

ui.tab.default_props("no-caps")


def text_ellipsis_with_tooltip():
    columns = [
        {
            "name": "name",
            "label": "Name",
            "field": "name",
        },
        {"name": "age", "label": "Age", "field": "age", "sortable": True},
    ]

    rows = [
        {"name": "Aliceddddddd ddddddddddddddddd" * 10, "age": 18},
        {"name": "Bob", "age": 21},
        {"name": "Carol"},
    ]

    ui.table(columns=columns, rows=rows, row_key="name").add_slot(
        "body-cell-name",
        r"""
  <q-td key="name" :props="props">

    <div class="row justify-center">
      <div style="width:200px" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ props.value }}</div>
      <q-tooltip>{{ props.value }}</q-tooltip>
    </div>
  </q-tb>
  """,
    )


with ui.tabs() as tabs:
    ellipsis_with_tooltip_tab = ui.tab("长文本省略+tooltip")


with ui.tab_panels(tabs, value=ellipsis_with_tooltip_tab):
    with ui.tab_panel(ellipsis_with_tooltip_tab):
        text_ellipsis_with_tooltip()

ui.run()
